<template>
    <div style="height: 100%;width: 100%;">
        <mt-header fixed title="道路货物运输量专项调查" style="z-index: 999999;">
          <span slot="left" @click="goBack">
            <mt-button icon="back" slot="left">返回</mt-button>
          </span>
            <mt-button icon="" slot="right" @click.native="showAddCar">新增</mt-button>
        </mt-header>
        <div style="padding-top:60%; padding-left:45%" v-if="loadFlag">
                <mt-spinner type="fading-circle" :size="50" color="rgb(100, 100, 100)"></mt-spinner>
        </div>
        <div
                style="margin-top: 10px;">
            <mt-checklist
                    :max="1"
                    v-model="value"
                    :options="options">
            </mt-checklist>
        </div>
        <mt-button type="primary" size="large" @click.native="changeCar">替换</mt-button>
        <div v-if="showAdd"
             style="position:fixed;top:0px;background: rgba(0, 0, 0, 0.5);height: 100%;width: 100%;">
            <div style="position:fixed;top:30%;padding:10px;background:#FFFFFF;border: #6d6d72;border-radius:5px;margin-left: 10%;margin-right: 10%;width: 80%;">
                <mt-field label="车牌号:" placeholder="请输入车牌号" type="text" v-model="newCarCode"></mt-field>
                <mt-field label="车辆颜色:" placeholder="请选择车辆颜色" :readonly="true" type="text" v-model="newCarColor" @click.native.capture="choseColor"></mt-field>
                <div style="flex-direction: row;justify-content: center;float: right;">
                    <mt-button size="small" type="primary" slot="right" @click.native="showAddCar">取消</mt-button>
                    <mt-button size="small" type="primary" slot="right" @click.native="addCar">确定</mt-button>
                </div>
            </div>
        </div>
        <!-- 车牌颜色选择器 -->
        <mt-popup
        v-model="popupVisibleColor"
        popup-transition="popup-fade"
        closeOnClickModal="true"
        position="bottom">
        <mt-picker :slots="slotsColor"  showToolbar ref="pickerColor" value-key="name">
            <div class="picker-toolbar-title">
            <div class="usi-btn-cancel" @click="popupVisibleColor = !popupVisibleColor">取消</div>
            <div class>请选择车牌颜色</div>
            <div class="usi-btn-sure" @click="handleConfigColor">确定</div>
            </div>
        </mt-picker>
        </mt-popup>
    </div>
</template>

<script>
    import {Toast} from 'mint-ui'
    export default {
        data() {
            return {
                showAdd: false,
                newCarCode: '',
                newCarColor: '',
                newCarColorCode:"",
                value: [],
                options: [],
                loadFlag: true,
                currentTagsColor: {},
                popupVisibleColor: false,
                slotsColor: [
                    {
                    values: [{"code":"1","flag":"Dcq","name":"蓝色"},
                    {"code":"2","flag":"Dcq","name":"黄色"},
                    {"code":"3","flag":"Dcq","name":"黑色"},
                    {"code":"4","flag":"Dcq","name":"白色"},
                    {"code":"5","flag":"Dcq","name":"黄绿"},
                    {"code":"6","flag":"Dcq","name":"渐变绿"},
                    {"code":"9","flag":"Dcq","name":"其他"},]
                    }
                ],
            }
        },
        props: [],
        watch: {

        },
        created() {

        },
        mounted() {

            this.getData();
        },
        methods: {
            getData() {
                let clDcb = JSON.parse(localStorage.getItem("hyclData"));
                this.axios.post('http://zxdc.catsic.com:9090/sampling/fill/replace', {
                    'data': {
                        "recid": this.$route.query.id
                    }
                }, {
                    'headers': {
                        'Content-Type': 'application/json',
                        'mobileHeader': '{"sessionId":' + localStorage.getItem('sessionId') + '}'
                    }
                }).then(result => {
                        if (result.data.status == "1000") {
                            //let newRecid = localStorage.getItem("newRecid");
                            this.loadFlag = false;
                            Toast("获取成功");//result.data.msg
                            let addFlag = true;
                            result.data.data.listCars.forEach(item => {
                                clDcb.forEach(itemCl => {
                                    if(item.vehicle_no == itemCl.cldcb2019001){
                                        addFlag = false;
                                    }
                                })
                                if(addFlag){
                                    let carItem = {};
                                    carItem.label = item.vehicle_no;
                                    carItem.value = item.recid;
                                    this.options.push(carItem);
                                }
                                addFlag = true;
                            })
                            console.log(result);
                        }
                        console.log(this.carList);
                    }, error => {
                        console.log("gettakecars request error:" + error);
                    }
                );
            },
            // 选择车牌颜色
            choseColor() {  
                this.popupVisibleColor = true;
            },
            //车牌颜色
            handleConfigColor: function() {
                this.newCarColor = this.$refs.pickerColor.getValues()[0].name;
                //this.newCarColorCode = this.currentTagsColor.code;
                //console.log("this.currentTagsColor.code"+this.$refs.pickerColor.getValues()[0].code);
                this.newCarColorCode = this.$refs.pickerColor.getValues()[0].code;
                this.popupVisibleColor = false;
            },
            goBack() {
                //点击后退
                this.$router.go(-1);
            },
            showAddCar() {
                this.showAdd = !this.showAdd;
            },
            addCar() {
                let data = {};
                this.axios.post('http://zxdc.catsic.com:9090/sampling/fill/insertClmlkInfo', {
                    'data': {
                        "recid": this.$route.query.id,
                        "vehicleNo": this.newCarCode,
                        "plateColorCode": this.newCarColorCode,
                    }
                }, {
                    'headers': {
                        'Content-Type': 'application/json',
                        'mobileHeader': '{"sessionId":' + localStorage.getItem('sessionId') + '}'
                    }
                }).then(result => {
                    if (result.data.status == "1000") {
                        Toast(result.data.msg);
                        this.reflashPage();
                        this.showAddCar();
                        this.carList.slice(0, this.carList.length);

                    }
                    console.log(result)
                }, error => {
                    console.log("replacecar request error:" + error);
                });
            },
            reflashPage(){
                let NewPage = '_empty' + '?time=' + new Date().getTime()/500;
                this.$router.push(NewPage);
                this.$router.go(-1);
            },
            changeCar() {
                // request
                // sessionId	用户登陆标识
                // newRecid	替换车辆样本recid
                // ownerId	经营业户唯一标识		业户详情接口获得
                // oldRecid	被替换车辆样本recid
                // schemeId	方案GUID
                // stepRecid	所在方案阶数GUID
                console.log(this.$route.query.row)

                let old = JSON.parse(this.$route.query.row).clmlkid;
                let newRecid = this.value[0];
                //localStorage.setItem('newRecid',newRecid);
                console.log('oldRecid' + old + 'newRecid' + newRecid)
                this.axios.post('http://zxdc.catsic.com:9090/sampling/fill/replaceCarsFromClmlk', {
                    'data': {
                        'oldRecid': old,
                        'newRecid': newRecid
                    }
                }, {
                    'headers': {
                        'Content-Type': 'application/json',
                        'mobileHeader': '{"sessionId":' + localStorage.getItem('sessionId') + '}'
                    }
                }).then(result => {
                    if (result.data.status == "1000") {
                        console.log("切换成功")
                        this.$router.go(-1);
                    }
                    console.log(result)
                }, error => {
                    console.log("replacecar request error:" + error);
                });
            },
        }
    }
</script>

<style lang="scss" scoped>
    .app-container-padding[data-v-7ba5bd90] {
    padding-top: 0px;
    padding-bottom: 40px;
    overflow-x: hidden;
    }
    .picker-toolbar-title {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  height: 200px;
  line-height: 40px;
  font-size: 16px;
  width: 100%;
}
.usi-btn-cancel,
.usi-btn-sure {
  color: #26a2ff;
}
.mint-popup-bottom {
  width: 100%;
  top: auto;
  right: auto;
  bottom: 0;
}
</style>